<template>
  <normal-layout page-index="7-3">
    <div class="bodyDiv">
      <div class="above">
        <!--数据总览-->
        <el-card style="width: 65%">
          <h3 slot="header">数据总览</h3>
          <div style="display: flex; margin: 20px">
            <div style="width: 50%;text-align: center">
              <h3 style="margin-left: -50px">正在训练数</h3>
              <h1 style="color: #409EFF;font-size: 100px;">{{current}}</h1>
            </div>
            <div style="width: 50%;text-align: center;">
              <h3 style="margin-left: -50px">训练完成数</h3>
              <h1 style="color: #B7EB8F;font-size: 100px;">{{current}}</h1>
            </div>
            <div style="width: 50%;text-align: center;">
              <h3 style="margin-left: -50px">测试完成数</h3>
              <h1 style="color: #B7EB8F;font-size: 100px;">{{current}}</h1>
            </div>
          </div>
        </el-card>
        <!--数据筛选-->
        <el-card style="width: 35%;margin-left: 10px">
          <h3 slot="header">数据筛选</h3>
          <el-form label-position="left">
            <el-form-item label="算法类型：">
              <el-select placeholder="选择算法类型" style="float: right"></el-select>
            </el-form-item>
            <el-form-item label="状态：">
              <el-select placeholder="选择算法状态" style="float: right"></el-select>
            </el-form-item>
            <el-form-item label="操作用户：">
              <el-select placeholder="选择操作用户" style="float: right"></el-select>
            </el-form-item>
            <el-button style="width: 200px;margin-left: calc(50% - 100px)">筛 选</el-button>
          </el-form>
        </el-card>
      </div>
      <div class="under">
        <el-card>
          <h3 slot="header">筛选结果</h3>
          <el-table :data="testData"
                    style="width: 100%;height: 420px;overflow-y: scroll" ref="table" stripe highlight-current-row border>
            <el-table-column label="算法名" prop="name">
            </el-table-column>
            <el-table-column label="配置" prop="config">
            </el-table-column>
            <el-table-column label="训练用户" prop="user">
            </el-table-column>
            <el-table-column label="开始训练时间" prop="starttime">
            </el-table-column>
            <el-table-column label="训练进度" prop="process"></el-table-column>
            <el-table-column label="训练准确率" prop="trainaccuracy"></el-table-column>
            <el-table-column label="测试准确率" prop="testaccuracy"></el-table-column>
            <el-table-column label="状态" prop="condition"></el-table-column>
            <el-table-column label="操作" min-width="200px">
              <template slot-scope="scope">
                  <el-button size="small" type="danger">停止训练</el-button>
                  <el-button size="small" type="primary">测试</el-button>
                  <el-button size="small">保存模型</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination></el-pagination>
        </el-card>
      </div>
    </div>
  </normal-layout>
</template>

<script>
  import NormalLayout from "../../components/NormalLayout";
    export default {
        name: "TrainTest",
      components:{NormalLayout},
      data(){
        return{
          current:99,
          testData:[
            {
              name:'频域',
              config:'默认',
              user:'关泽宇',
              starttime:'12.26',
              process:'50%',
              trainaccuracy:'98%',
              testaccuracy:'96%',
              condition:'训练完成',
            },
            {
              name:'神经网络',
              config:'参数一',
              user:'白玉泉',
              starttime:'12.26',
              process:'50%',
              trainaccuracy:'90%',
              testaccuracy:'92%',
              condition:'训练完成',
            },
            {
              name:'频域',
              config:'参数一',
              user:'叶远明',
              starttime:'12.26',
              process:'50%',
              trainaccuracy:'98.5%',
              testaccuracy:'76%',
              condition:'训练完成',
            },
            {
              name:'3D卷积',
              config:'默认',
              user:'关泽宇',
              starttime:'12.26',
              process:'50%',
              trainaccuracy:'88%',
              testaccuracy:'75%',
              condition:'训练完成',
            },
          ],
        }
      }
    }
</script>

<style scoped>
  .bodyDiv{
    margin: 10px;
  }
  .above{
    display: flex;
  }
  .under{
    margin-top: 10px;
  }
</style>
